<template>
    
    <!-- 档案柜管理 -->
        <div class="app-container">
            <el-form ref="queryParamsRef" :inline="true" :model="queryParams">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="律师柜编号-律师柜管理">
                            <el-input v-model="queryParams.casecode" clearable @clear="getTableDataLists" style="width: 15vw;"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="串口号">
                            <el-input v-model="queryParams.name" 
                            clearable 
                            @clear="getTableDataLists" 
                            @keyup.enter.prevent="getTableDataLists"
                            style="width: 15vw;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="通道号">
                            <el-input v-model="queryParams.name" 
                            clearable 
                            @clear="getTableDataLists" 
                            @keyup.enter.prevent="getTableDataLists"
                            style="width: 15vw;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" @click="getTableDataLists">
                                <el-icon class="me-1">
                                    <Search/>
                                </el-icon>
                                查询
                            </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="handleRest">
                                <el-icon class="me-1">
                                    <Refresh/>
                                </el-icon>
                                重置
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-divider class="mt-0 mb-3"/>
            <el-row class="mb-3">
                <el-col :span="24">
                    <el-space>
                        <el-button
                            plain
                            type="primary"
                            @click="AddEditDrawerRef.showAddDrawer()"
                        >
                            <el-icon class="me-2">
                                <Plus/>
                            </el-icon>
                            新增
                        </el-button>
                    </el-space>
                </el-col>
            </el-row>
            <el-table
                ref="TableDataRef"
                v-loading="loading"
                :data="TablesData"
                show-overflow-tooltip
            >
                <el-table-column label="律师柜编码" prop="casetype"/>
                <el-table-column label="行号" prop="name"/>
                <el-table-column label="列表" prop="casetype"/>
                <el-table-column label="串口号" prop="userName"/>
                <el-table-column label="通道号" prop="casetype"/>
                <el-table-column label="状态" prop="state" width="80">
                    <template #default="scope">
                        <dict-tag :options="nj_anjian_status" :value="scope.row.state"/>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" label="操作" width="200">
                    <template #default="scope">
                        <el-button
                            link size="small"
                            type="primary"
                            @click="AddEditDrawerRef.showEditDrawer(scope.row,'edit')"
                            >
                            <el-icon class="me-1">
                                <Edit/>
                            </el-icon>
                            编辑
                        </el-button>
                        <el-button
                            link size="small"
                            type="primary"
                            @click="AddEditDrawerRef.showEditDrawer(scope.row,'detail')"
                            >
                            <el-icon class="me-1">
                                <Edit/>
                            </el-icon>
                            详情
                        </el-button>
                        <el-button
                            link size="small"
                            type="danger"
                            @click="deleteData(scope.row)">
                            <el-icon class="me-1">
                                <Delete/>
                            </el-icon>
                            删除
                        </el-button>    
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="paging.pageNum"
                v-model:limit="paging.pageSize"
                @pagination="getTableDataLists"
            />
            <AddEditDrawer ref="AddEditDrawerRef" @getCaseList="getTableDataLists" />
        </div>
    </template>
    
    <script setup>
    import {ElMessageBox} from 'element-plus'
    const {proxy} = getCurrentInstance();
    import AddEditDrawer from "./components/AddEditDrawer.vue";
    // import {getCaseInfoList,getCaseInfoInfo,  deleteCaseInfo} from "@/api/CaseInfo/CaseInfo";
    import PageEnum from "@/enum/PageEnum.js";
    
    const {sys_normal_disable,nj_anjian_status} = proxy.useDict('sys_normal_disable', 'nj_anjian_status')
    
    const queryParamsRef = ref()
    const AddEditDrawerRef = ref({})
    const loading = ref(false)
    
    const paging = ref({
        // 页码
        pageNum: 1,
        // 分页数量
        pageSize: PageEnum.SIZE
    })
    const queryParams = ref({
        name: '',
        casecode: '',
    })
    
    const total = ref(0)
    const TablesData = ref([{
        name:'111',
    }])
    
    onMounted(() => {
        // getTableDataLists()
    })
    
    // 获取案件列表
    const getTableDataLists = async () => {
        loading.value = true
        await getCaseInfoList(queryParams.value, paging.value).then(res => {
            TablesData.value = res.rows
            total.value = res.total
            loading.value = false
        })
    }
    const TableDataRef = ref()
    
    const deleteData = async (row) => {
        ElMessageBox.confirm('确定删除此案件？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        proxy.$modal.msgSuccess("删除成功");
        // deleteCaseInfo(row.caseCaseinfoId).then(res => {
        //     getTableDataLists()
        // })
      }).catch(() => {
      });
    }
    
    // 重置搜索调解
    const handleRest = () => {
        queryParams.value = {
            name: '',
            casecode: '',
        }
        getTableDataLists()
    }
    </script>
    
    <style lang="scss" scoped>
    
    </style>